<template>
	<view class="content">
		<button class="size" @tap="actionSheet">弹出系统选择按钮框</button>
		<button class="size" @tap="alert">弹出系统提示对话框</button>
		<button class="size" @tap="confirm">弹出系统确认对话框</button>
		<button class="size" @tap="closePreviewImage">关闭预览图片界面</button>
		<button class="size" @tap="closeWaiting">关闭系统等待对话框</button>
		<button class="size" @tap="closeToast">关闭自动消失的提示消息</button>
		<button class="size" @tap="showWaiting">显示系统等待对话框</button>
		<button class="size" @tap="pickDate">弹出系统日期选择对话框</button>
		<button class="size" @tap="pickTime">弹出系统时间选择对话框</button>
		<button class="size" @tap="prompt">弹出系统输入对话框</button>
		<button class="size" @tap="toast">显示自动消失的提示消息</button>
		<button class="size" @tap="setUIStyle">设置原生界面样式（暗黑模式）</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			actionSheet() {
				var actionbuttons = [{
					title: "不同意",
					style: "destructive"
				}, {
					title: "1"
				}, {
					title: "2"
				}, {
					title: "3"
				}];
				var actionstyle = {
					title: "Hello HTML5 plus!",
					cancel: "取消",
					buttons: actionbuttons
				};
				plus.nativeUI.actionSheet(actionstyle, function(e) {
					console.log("User pressed: " + e.index);
				});

			},
			alert() {
				plus.nativeUI.alert("Hello HTML5 plus!", function() {
					console.log("User pressed!");
				}, "nativeUI", "OK");
			},
			confirm() {
				plus.nativeUI.confirm("Are you sure ready?", function(e) {
					console.log("Close confirm: " + e.index);
				}, {
					"title": "nativeUI",
					"buttons": ["Yes", "No"],
					"verticalAlign": "center"
				});
			},
			closePreviewImage() {
				plus.nativeUI.previewImage([
					"http://img-cdn-qiniu.dcloud.net.cn/icon1.png",
					"http://img-cdn-qiniu.dcloud.net.cn/icon2.png",
					"http://img-cdn-qiniu.dcloud.net.cn/icon3.png"
				]);
				setTimeout(function() {
					plus.nativeUI.closePreviewImage();
				}, 2000);

			},
			closeWaiting() {
				plus.nativeUI.showWaiting();
				setTimeout(function() {
					plus.nativeUI.closeWaiting();
				}, 1000);
			},
			closeToast() {
				plus.nativeUI.toast(
					"<font style=\"font-size:14px\">再按一次返回键退出<br/>点此可<a onclick=\"console.log('clicked')\">反馈意见</a></font>", {
						type: 'richtext',
						duration: 'long',
						richTextStyle: {
							align: 'center'
						}
					}
				);
				setTimeout(function() {
					plus.nativeUI.closeToast();
				}, 2000);

			},
			showWaiting() {
				var w = plus.nativeUI.showWaiting("", {
					background: "rgba(0,0,0,0)",
					padlock: true,
					style: "black",
					color: "#ccc"
				});
			},
			pickDate() {
				var styles = {};
				styles.title = "请选择日期："; // 显示标题
				styles.date = new Date(), styles.date.setFullYear(2018, 8, 8); // 默认显示的日期
				styles.minDate = new Date(), styles.minDate.setFullYear(2010, 0, 1); // 设置最小可选日期为“2010-01-01”
				styles.maxDate = new Date(), styles.maxDate.setFullYear(2020, 11, 31); // 设置最大可选日期为“2020-12-31”

				plus.nativeUI.pickDate(function(e) {
					var d = e.date;
					console.log("选择的日期：" + d.getFullYear() + "-" + (d.getMonth() + 1) + "-" + d.getDate());
				}, function(e) {
					console.log("未选择日期：" + e.message);
				}, styles);

			},
			pickTime() {
				var styles = {};
				styles.title = "请选择时间："; //设置标题
				styles.time = new Date(), styles.time.setHours(6, 0); //设置默认显示时间为早上6点
				styles.is24Hour = false; //使用12小时制模式显示

				plus.nativeUI.pickTime(function(e) {
					var d = e.date;
					console.log("选择的时间：" + d.getHours() + ":" + d.getMinutes());
				}, function(e) {
					console.log("未选择时间：" + e.message);
				}, styles);
			},
			prompt() {
				plus.nativeUI.prompt("Input your name: ", function(e) {
					console.log(((e.index == 0) ? "OK: " : "Cancel") + e.value);
				}, "nativeUI", "your name", ["OK", "Cancel"]);
			},
			toast(){
				plus.nativeUI.toast("I'am toast information!");
			},
			setUIStyle(){
				plus.nativeUI.setUIStyle("dark");
			}


		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}

	.size {
		margin: 30rpx 0;
	}
</style>
